<template>
  <el-row class="detail-row">
    <div class="flex mb16">
      <div>
        <Title title="订单信息" font-size="16px"/>
      </div>
      <el-tooltip placement="top">
        <div slot="content">
          <div>统计值公式说明</div>
          <div>{{ `1、总含税金额=${isProject?'项目渠道单':'渠道订单'}的总含税金额` }}</div>
          <div>2、总成本=成本之和</div>
          <div>3、毛利=总含税金额-总成本</div>
          <div>4、毛利率=（总含税金额-总成本）/总含税金额*100%</div>
        </div>
        <tipIcon is-diy class="ml5" />
      </el-tooltip>
    </div>
    <dataDisplay :data-list="dataList" />
    <priceTable
      v-if="orderInfo && orderInfo.priceTable"
      ref="priceTableRef"
      :is-edit="false"
      :table-data="orderInfo.priceTable"
      style="margin-bottom: 16px;margin-top: 10px;" />
    <el-form
      label-position="right"
      label-width="110px"
      class="lineHeight32 el-form-color999">
      <el-col v-if="detailInfo && detailInfo.auditorUser" :span="8">
        <el-form-item label="审批人:">
          <CheckUserInfo v-if="detailInfo.auditorUserId" :label="detailInfo.auditorUser" :user-id="detailInfo.auditorUserId" />
          <span v-else>{{ detailInfo.auditorUser || '--' }}</span>
          <contrast-info-tipTool
            :origin-data="configureDetailInfo"
            :new-data="detailInfo"
            :correlate-filed="['auditorUser']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureDetailInfo, 'auditorUser') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col v-if="detailInfo && detailInfo.auditorUser" :span="8">
        <el-form-item label="审批时间:">
          <span>{{ detailInfo.auditorTime | format('YYYY-MM-DD HH:mm:ss') }}</span>
          <contrast-info-tipTool
            :origin-data="configureDetailInfo"
            :new-data="detailInfo"
            :correlate-filed="['auditorTime']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureDetailInfo, 'auditorTime') | format('YYYY-MM-DD HH:mm:ss') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col v-if="isProject" :span="8">
        <el-form-item label="项目名称:">
          <span v-if="orderInfo && orderInfo.projectName" style="cursor:pointer;color:#406EFF;" @click="goProjectDetail(orderInfo.projectId)">{{ orderInfo.projectName || '--' }}</span>
          <span v-else>--</span>
        </el-form-item>
      </el-col>
      <el-col v-if="isProject" :span="8">
        <el-form-item label="项目类型:">
          <span v-if="orderInfo">{{ orderInfo.projectTypeStr || '--' }}</span>
          <span v-else>{{ orderInfo.projectTypeStr || '--' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="销售:">
          <CheckUserInfo v-if="clientInfo && clientInfo.market" :user-id="clientInfo.marketId" :label="clientInfo.market" />
          <span v-else>--</span>
          <contrast-info-tipTool
            v-if="clientInfo"
            :origin-data="configureClientInfo"
            :new-data="clientInfo"
            :correlate-filed="['market']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureClientInfo, 'market') }}
            </span>
          </contrast-info-tipTool>
          <contrast-info-tipTool
            v-else
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['market']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'market') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所属部门:">
          <ToolTip v-if="orderInfo.attributionMatrixName" :content="(orderInfo.attributionMatrixFullName || orderInfo.attributionMatrixName) | getDeptFullName">
            <span>{{ orderInfo.attributionMatrixName || '--' }}</span>
          </ToolTip>
          <div v-else>--</div>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['attributionMatrixName']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'attributionMatrixName') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="订单编号:">
          <span>{{ orderInfo.orderId || '--' }}</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['orderId']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'orderId') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间:">
          <span>{{ orderInfo.createTime | format('YYYY-MM-DD HH:mm') }}</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['createTime']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'createTime') | format('YYYY-MM-DD HH:mm') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人:">
          <CheckUserInfo v-if="orderInfo.createName" :user-id="orderInfo.createUserId" :label="orderInfo.createName" />
          <span v-else>--</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['createName']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'createName') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="下单日期:">
          <span>{{ orderInfo.orderTime | standardFormatNoHour }}</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['orderTime']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'orderTime') | standardFormatNoHour }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col v-if="!isProject" :span="8">
        <el-form-item label="订单类型:">
          <span v-if="!orderInfo.originalOrder">{{ orderInfo.orderType | orderTypeStatusFilter }}</span>
          <el-tooltip v-else placement="top">
            <div slot="content">{{ orderInfo.orderType | orderTypeStatusFilter }}(原订单:{{ orderInfo.originalOrder }})</div>
            <span>
              {{ orderInfo.orderType | orderTypeStatusFilter }}(原订单:
              <router-link
                :to="{name: 'orderDetail', params: { orderId: orderInfo.originalOrderId }}"
                target="_blank"
                class="original-order"
              >{{ orderInfo.originalOrder }}</router-link>)
            </span>
          </el-tooltip>

        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="收入类型:">
          <span v-if="orderInfo.incomeTypeStr">{{ orderInfo.incomeTypeStr || '--' }}</span>
          <span v-else-if="orderInfo.incomeTypeStr === 0">{{ orderInfo.incomeTypeStr }}</span>
          <span v-else>--</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['incomeTypeStr']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'incomeTypeStr') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="结算基数(元):">
          <span v-if="orderInfo.priceBase">{{ (orderInfo.priceBase / 100) | moneyFilter }}</span>
          <span v-else-if="orderInfo.priceBase === 0">0</span>
          <span v-else>--</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['priceBase']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'priceBase') / 100 | moneyFilter }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="订单来源:">
          <span v-if="orderInfo.orderSource">{{ orderInfo.orderSource === 1?'飞博招商':'达人个人引进' }}</span>
          <span v-else>--</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['orderSource']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'orderSource') === '--' ? '--' : getTargetData(configureOrderInfo, 'orderSource') === 1?'飞博招商':'达人个人引进' }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="品牌标签:">
          <span v-if="orderInfo.needCategoryName">{{ orderInfo.needCategoryName }}</span>
          <span v-else>--</span>
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['needCategoryName']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'needCategoryName') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="品牌名称:">
          <div style="display: flex;">
            <ToolTip :content="orderInfo.theme"/>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['theme']"
              margin-left="6px"
            >
              <span slot="tipContent">
                {{ getTargetData(configureOrderInfo, 'theme') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item :class="{'mb10':showMobilePage && orderStatus === 1 && isPublishAuth && !isFileDisabled}" label="执行人(商务侧):">
          <selectWithUserLoad
            v-if="orderStatus === 1 && isPublishAuth && !isFileDisabled"
            ref="selectOrderOperator"
            v-model="paramsObj.orderBusinessOperator"
            :default-list="orderInfo.orderBusinessOperator || []"
            :value-type="'object'"
            :collapse-tags="false"
            :extend-params="{
              isOnlyOperator: true,
              jobStatus: 1
            }"
            key-name="id"
            class="response-input"
            style="display:inline-block;"
            label-name="userName"
            multiple
            show-check-user
            filterable
            clearable
          />
          <div v-else class="flex">
            <CheckUserInfo v-if="orderInfo.orderBusinessOperator" :user-list="orderInfo.orderBusinessOperator" multiple />
            <span v-else>--</span>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['orderBusinessOperator']"
            >
              <span slot="tipContent">
                {{ jointFun(getTargetData(configureOrderInfo, 'orderBusinessOperator'), 'userName') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item :class="{'mb10':showMobilePage && orderStatus === 1 && isPublishAuth && !isFileDisabled}" label="执行人(资源侧):">
          <div v-if="orderStatus === 1 && isPublishAuth && !isFileDisabled" class="flex-center price-base-box">
            <selectWithUserLoad
              ref="selectOrderResourceOperator"
              v-model="paramsObj.orderResourceOperator"
              :default-list="orderInfo.orderResourceOperator || []"
              :value-type="'object'"
              :collapse-tags="false"
              :extend-params="{
                isOnlyResourceOperator: true
              }"
              key-name="id"
              class="response-input"
              style="display:inline-block;"
              label-name="userName"
              multiple
              show-check-user
              filterable
              clearable
            />
            <el-tooltip placement="top">
              <div slot="content">资源侧不可填写签约组人员与商务侧人员</div>
              <tipIcon is-diy class="ml5"/>
            </el-tooltip>
          </div>
          <div v-else class="flex">
            <CheckUserInfo v-if="orderInfo.orderResourceOperator" :user-list="orderInfo.orderResourceOperator" multiple />
            <span v-else>--</span>
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['orderResourceOperator']"
            >
              <span slot="tipContent">
                {{ jointFun(getTargetData(configureOrderInfo, 'orderResourceOperator'), 'userName') }}
              </span>
            </contrast-info-tipTool>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="协作部门:">
          <filter-cascader
            v-if="orderStatus === 1 && isPublishAuth && !isFileDisabled"
            v-model="paramsObj.cooperationDepartment"
            :options="deptTreeList"
            class="response-input"
            placeholder="请选择协作部门"
          />
          <div v-else class="flex">
            <ToolTip :content="setOrderOperator(orderInfo.cooperationDepartment, 'name')" />
            <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['cooperationDepartment']"
            >
              <span slot="tipContent">
                {{ jointFun(getTargetData(configureOrderInfo, 'cooperationDepartment'), 'name') }}
              </span>
            </contrast-info-tipTool>
          </div>
          <!-- <span v-else>{{ orderInfo.cooperationDepartment | cooperation }}</span> -->
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="封账月份:">
          <span>{{ orderInfo.sealMonth || '--' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备注:">
          <ToolTip :content="orderInfo.remark" />
          <contrast-info-tipTool
            :origin-data="configureOrderInfo"
            :new-data="orderInfo"
            :correlate-filed="['remark']"
          >
            <span slot="tipContent">
              {{ getTargetData(configureOrderInfo, 'remark') }}
            </span>
          </contrast-info-tipTool>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import { standardFormat, standardFormatNoHour, format } from '@/filters/date';
import { getDeptFullName } from '@/filters/dept';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import {
  orderTypeStatusFilter,
  setAccountState,
  setReviewState,
  setSealBillType,
  setPayWay
} from '@/filters/status';
import priceTable from '@/views/order/model/priceTable';
import ResourceInfo from '@/components/ResourceInfo';
import { moneyFilter } from '@/filters/number';
import Title from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import platformIcon from '@/components/Common/platformIcon';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import filterCascader from '@/components/Common/filterCascader';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
import { getDepartmentAll } from '@/api/config';
import TagSelect from '@/components/Common/tagSelect';
import incomeAmountIcon from '@/assets/chargeOffDetail/incomeAmount.png';
import maoriIcon from '@/assets/chargeOffDetail/maori.png';
import costIcon from '@/assets/dataDisplay/icon_45.png';
import math from '@/utils/math';

// 对比信息使用
import ContrastInfoTipTool from './contrastInfoTiptool';
import { getTargetData, jointFun } from '@/utils';
export default {
  components: {
    Title, FileShowList, platformIcon, ResourceInfo, ContrastInfoTipTool, priceTable,
    selectWithUserLoad, filterCascader, TagSelect, dataDisplay },
  filters: {
    standardFormat,
    setAccountState,
    format,
    getDeptFullName,
    standardFormatNoHour,
    orderTypeStatusFilter,
    setReviewState,
    setSealBillType,
    setPayWay,
    moneyFilter,
    cooperation: (data) => {
      if (!data || data.length === 0) return '--';
      return data.map(i => i.name).join(',');
    }
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    configureOrderInfo: {
      type: Object,
      default: () => {
        return null;
      }
    },
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    configureDetailInfo: {
      type: Object,
      default: () => {
        return null;
      }
    },
    isProject: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      costIcon,
      maoriIcon,
      incomeAmountIcon,
      deptTreeList: [],
      paramsObj: {
        orderOperator: [],
        orderBusinessOperator: [],
        orderResourceOperator: [],
        cooperationDepartment: []
      }
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    clientInfo() {
      return this.detailInfo ? this.detailInfo.clientInfo : {};
    },
    isFileDisabled() {
      return !hasRouteAuth('crm:orderList:publishInfo');
    },
    configureClientInfo() {
      return this.configureDetailInfo ? this.configureDetailInfo.clientInfo : {};
    },
    orderStatus() {
      // 订单状态: 0: 草稿中 1: 待发布 2: 待核算 3: 待审批 4: 待封账 5: 封账中 6: 已封账 7: 已完成
      return this.detailInfo ? this.detailInfo.orderStatus || '' : '';
    },
    isAllAdmin() { // 是否有全向权限
      const item = this.detailInfo ? this.detailInfo : {};
      const departmentId = item.attributionMatrixId;

      let cooperationDepartmentIds = []; // 协作部门ID
      if (item.orderInfo.cooperationDepartment && item.orderInfo.cooperationDepartment.length) {
        cooperationDepartmentIds = item.orderInfo.cooperationDepartment.map(i => i.id);
      }
      let departmentAuth = false; // 拥有部门全向编辑，当前登录的用户存在该条订单的部门中,或者协作部门中
      if (hasRouteAuth('crm:orderList:adminEdit')) {
        const currentDeptIds = this.userInfo.currentDeptIds || []; // 当前部门的所有id，比如:用户部门是 研发部->产品组，那么当前部门就是产品组
        const topDeptIds = this.userInfo.topDeptIds || []; // 顶级部门的id列表，比如:用户部门是 研发部->产品组，那么顶级部门就是研发部

        const departmentAry = currentDeptIds.concat(topDeptIds);
        departmentAuth = departmentAry.some(i => {
          return (departmentId === i) || cooperationDepartmentIds.includes(i);
        });
      }
      return departmentAuth || hasRouteAuth('crm:orderList:admin');
    },
    isPublishAuth() { // 发布权限
      /**
       * 发布权限 && （
       * 用户在该条订单的执行人中 ||
       * 用户为当前销售  ||
       * 部门全向编辑及部门符合要求 ||
       * 全向展示 ||
       * 如果执行人为空且部门符合要求）
       */
      if (this.userInfo.userName === '管理员') return true; // 管理员
      const item = this.detailInfo ? this.detailInfo : {};
      const orderOperator = item.orderInfo.orderOperator || []; // 执行人
      const departmentId = item.attributionMatrixId;

      let cooperationDepartmentIds = []; // 协作部门ID
      if (item.orderInfo.cooperationDepartment && item.orderInfo.cooperationDepartment.length) {
        cooperationDepartmentIds = item.orderInfo.cooperationDepartment.map(i => i.id);
      }

      const isOperatorAuth = orderOperator ? orderOperator.some(i => {
        return i.id === this.userInfo.id;
      }) : false; // 是否是执行人

      const marketId = this.detailInfo ? this.detailInfo.clientInfo.marketId : '';
      const isSales = marketId === this.userInfo.id; // 是否销售

      let departmentAuth = false; // 拥有部门全向编辑，当前登录的用户存在该条订单的部门中,或者协作部门中
      const isNoOperator = !orderOperator || orderOperator.length === 0;
      if (isNoOperator) {
        const currentDeptIds = this.userInfo.currentDeptIds || []; // 当前部门的所有id，比如:用户部门是 研发部->产品组，那么当前部门就是产品组
        const topDeptIds = this.userInfo.topDeptIds || []; // 顶级部门的id列表，比如:用户部门是 研发部->产品组，那么顶级部门就是研发部

        const departmentAry = currentDeptIds.concat(topDeptIds);
        departmentAuth = departmentAry.some(i => {
          return (departmentId === i) || cooperationDepartmentIds.includes(i);
        });
      }
      return (isOperatorAuth || isSales || departmentAuth || this.isAllAdmin) && hasRouteAuth('crm:orderList:publish');
    },
    maoli() {
      const totalPrice = Number(this.orderInfo.priceTable[0].totalPrice) || 0;
      const moali = math.subtract(totalPrice, (this.orderInfo.cost / 100) || 0);
      return totalPrice ? (math.divide(moali, totalPrice) * 100).toFixed(2) : '';
    },
    dataList() {
      // 总成本=成本小计
      // 毛利=总含税金额-总成本
      // 毛利率=(总含税金额-总成本)/总含税金额*100%
      const orderInfo = this.orderInfo;
      if (!orderInfo.priceTable) { return []; }
      const result = math.subtract(orderInfo.priceTable[0].totalPrice || 0, (orderInfo.cost / 100) || 0);
      const arr = [
        { icon: incomeAmountIcon, label: '总含税金额', data: orderInfo.priceTable[0].totalPrice },
        { icon: costIcon, label: '总成本', data: (orderInfo.cost / 100), isWarning: orderInfo.cost / 100 > orderInfo.priceTable[0].totalPrice },
        { icon: incomeAmountIcon, label: '毛利', data: result },
        { icon: maoriIcon, label: '毛利率', data: this.maoli, unit: '%' }
      ];
      return arr;
    }
  },
  created() {
    this.$nextTick(() => {
      this.paramsObj.orderBusinessOperator = this.orderInfo.orderBusinessOperator;
      this.paramsObj.orderResourceOperator = this.orderInfo.orderResourceOperator;
      if (this.orderInfo.cooperationDepartment && this.orderInfo.cooperationDepartment.length) {
        this.paramsObj.cooperationDepartment = this.orderInfo.cooperationDepartment.map(i => i.id);
      }
    });
    this.queryDeptTreeList();
  },
  methods: {
    getTargetData,
    jointFun,
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    setOrderOperator(data, key = 'userName') {
      if (!data || data.length === 0) return '--';
      const name = data.map(i => i[key]);
      return name.join(',');
    },
    goProjectDetail(id) {
      const routeUrl = this.$router.resolve({
        name: 'projectDetail',
        params: { id: id }
      });
      window.open(routeUrl.href, '_blank');
    },
    getParams() {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      if (params.cooperationDepartment) {
        params.cooperationDepartment = params.cooperationDepartment.map(i => ({ id: i }));
      }
      return params;
    }
  }
};
</script>
<style lang="scss" scoped>
.detail-row {
  background-color: #fff;
  padding: 24px 24px 0 24px;
  &::v-deep {
    .el-form-item__label {
      color: #999;
    }
    .el-form-item__content {
      color: #333;
    }
    .response-input {
      width: 240px;
      .el-input__inner {
        width: 240px;
      }
    }
    @media only screen and (min-width: 1200px) and (max-width: 1350px) {
      .response-input {
        width: 200px;
        .el-input__inner {
          width: 200px;
        }
      }
    }
    @media only screen  and (max-width: 1200px) {
      .response-input {
        width: 180px;
        .el-input__inner {
          width: 180px;
        }
      }
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
::v-deep {
  .multiply-select-scroll .el-select__tags, .multiply-select-scroll .el-cascader__tags {
    max-height: 40px !important;
  }
}
.mb10 {
  margin-bottom:  10px !important;
}
.mb16 {
  margin-bottom: 16px;
}
</style>

